var current_page = 1;
var sector_check_list = [];
var sector_check_list_pageSize = 10;
var sector_check_list_page = 0;
var sector_check_state = 'list_show';
async function update_sector_check_list() {
    const api = 'http://47.109.78.200:10010/transaction/selectByStatus';
    var data = {
        pageSize: 10,
        pageNum: current_page,
        status: 0,
    };
    const url = getRequestUrl(data, api);
    await fetchWithTimeout(url, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            token: getCookieValue('token'),
        }
    }).then(response => response.json())
        .then(data => {
            if (data['code'] == 100) {
                sector_check_list = data['data'];
            } else {
                float_text('查询数据失败');
            }
        }).catch(error => {
            float_text('出现未知错误');
            console.log(error);
        });
    displaySectorCheckList();
}
async function update_sector_check_list_page() {
    const api = 'http://47.109.78.200:10010/transaction/selectCountByStatus';
    data = {
        status: 0,
    };
    const url = getRequestUrl(data, api);
    await fetchWithTimeout(url, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            token: getCookieValue('token'),
        }
    }).then(response => response.json())
        .then(data => {
            if (data['code'] == 100) {
                sector_check_list_page = Math.ceil(data['data'] / sector_check_list_pageSize);
            } else {
                float_text('获取页码信息出现错误');
            }
        }).catch(error => {
            console.log('出现未知错误');
        });
    document.querySelector('.sector-check-first #jump-page .page-num').innerHTML = `/ ${sector_check_list_page}`;
    current_page = Math.min(current_page, sector_check_list_page);
    document.querySelector('.sector-check-first #jump-page input').value = current_page;
}
async function displaySectorCheckList() {
    const table = document.querySelector('.sector-check-first #table');
    const body = table.querySelector('#table-body');
    var content = '';
    for (var i = 0; i < sector_check_list.length; i++) {
        var item = sector_check_list[i];
        content += `
        <tr>
            <td>${item.id}</td>
            <td>${item.time}</td>
            <td>${item.trader}</td>
            <td>${item.payee}</td>
            <td>${item.money}</td>
            <td>
                <div id='view-detail' index=${i} class='operate-button icon-chakan'></div>
                <div id='pass-button' index=${i} class='operate-button icon-zhengque5' style="color:rgb(0,185,0) !important;"></div>
                <div id='fail-button' index=${i} class='operate-button icon-jinggao8' style="color:rgb(185,0,0) !important;"></div>
            </td>
        </tr>
        `;
    }
    body.innerHTML = content;
    var tempList = body.querySelectorAll('#view-detail');
    for (const item of tempList) {
        add_float_tip(item, '查看详情');
    }
    for (var i = 0; i < tempList.length; i++) {
        tempList[i].addEventListener('click',
            async function () {
                var index = this.getAttribute('index');
                const contianer = document.querySelector('.sector-check-second #trade-detail');
                var content = `
            <div style="display: flex; margin: 20px 0;">
                <div class="info-show">ID :</div>
                <input readonly value=${sector_check_list[index].id} class='muti-line-input' type="text"
                    style="display: inline-block; margin: 0 30px;font-size: 22px; width: 75%; height: 30px;">
            </div>
            <div style="display: flex; margin: 20px 0;">
                <div class="info-show">交易时间 :</div>
                <input readonly value=${sector_check_list[index].time} class='muti-line-input' type="text"
                    style="display: inline-block; margin: 0 30px;font-size: 22px; width: 75%; height: 30px;">
            </div>
            <div style="display: flex; margin: 20px 0;">
                <div class="info-show">付款方 :</div>
                <input readonly value=${sector_check_list[index].trader} class='muti-line-input' type="text"
                    style="display: inline-block; margin: 0 30px;font-size: 22px; width: 75%; height: 30px;">
            </div>
            <div style="display: flex; margin: 20px 0;">
                <div class="info-show">收款方 :</div>
                <input readonly value=${sector_check_list[index].payee} class='muti-line-input' type="text"
                    style="display: inline-block; margin: 0 30px;font-size: 22px; width: 75%; height: 30px;">
            </div>
            <div style="display: flex; margin: 20px 0;">
                <div class="info-show">交易金额 :</div>
                <input readonly value=${sector_check_list[index].money} class='muti-line-input' type="text"
                    style="display: inline-block; margin: 0 30px;font-size: 22px; width: 75%; height: 30px;">
            </div>
            <div style="display: flex; margin: 20px 0;">
                <div class="info-show">编辑人 :</div>
                <input readonly value=${sector_check_list[index].userId || 'NULL'} class='muti-line-input' type="text"
                    style="display: inline-block; margin: 0 30px;font-size: 22px; width: 75%; height: 30px;">
            </div>
        `;
                contianer.innerHTML = content;
                sector_check_state = 'detail_show';
                draw_sector_check();
            }
        );
    }
    tempList = body.querySelectorAll('#pass-button');
    for (const item of tempList) {
        add_float_tip(item, '审核通过');
    }
    for (var i = 0; i < tempList.length; i++) {
        tempList[i].addEventListener('mouseover',
            function () {
                this.style['color'] = 'rgb(0, 220, 0)';
            }
        );
        tempList[i].addEventListener('mouseout',
            function () {
                this.style['color'] = 'rgb(0, 185, 0)';
            }
        );
        tempList[i].addEventListener('click', async function () {
            var index = this.getAttribute('index');
            var content = `
                    <div style="background-color: #fff; padding: 20px 30px; font-size:26px; font-weight: lighter; border:none; border-radius:20px; overflow:hidden;">
                        <div style="margin: 0px 20px 40px 20px; color:rgb(0,0,0); font-weight: bold;">是否将该交易判定为正常交易?</div>
                        <p style="margin: 10px 60px; font-size:22px;">ID : ${sector_check_list[index].id}</p>
                        <p style="margin: 10px 60px; font-size:22px;">交易时间 : ${sector_check_list[index].time}</p>
                        <p style="margin: 10px 60px; font-size:22px;">付款人 : ${sector_check_list[index].trader}</p>
                        <p style="margin: 10px 60px; font-size:22px;">收款人 : ${sector_check_list[index].payee}</p>
                        <p style="margin: 10px 60px; font-size:22px;">交易金额 : ${sector_check_list[index].money}</p>
                        <button class='fullScreen-button' id="confirm-button" index=${index} style="display:inline; width:90%; height:45px; margin: 30px 20px 0 20px; font-size:22px;">确认</button>
                        <button class='fullScreen-button2' style="display:inline; width:90%; height:45px; margin: 30px 20px 0 20px; font-size:22px;" onclick="hideFullScreenTip()">取消</button> 
                    </div>
                    `;
            showFullScreenTip(content);
            document.querySelector('.fullScreen-tip #confirm-button').addEventListener('click',
                async function () {
                    var index = this.getAttribute('index');
                    //更新该交易
                    const api = 'http://47.109.78.200:10010/transaction/updateTransaction';
                    data = sector_check_list[index];
                    data.status = 2;
                    // const url = getRequestUrl(data, api);
                    await fetchWithTimeout(api, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json',
                            'token': getCookieValue('token'),
                        },
                        body: JSON.stringify(data),
                    }).then(response => response.json())
                        .then(data => {
                            console.log(data);
                            if (data['code'] == 100) {
                                float_text('审核通过成功');
                            } else {
                                if (data['msg'] == '未登入') {
                                    exit_login();
                                    return;
                                }
                                float_text('操作失败');
                            }
                        }).catch(error => {
                            console.log(error);
                        });
                    await update_sector_check_list_page();
                    await update_sector_check_list();
                    hideFullScreenTip();
                }
            );

        }
        );
    }
    tempList = body.querySelectorAll('#fail-button');
    for (const item of tempList) {
        add_float_tip(item, '存在洗钱嫌疑');
    }
    for (var i = 0; i < tempList.length; i++) {
        tempList[i].addEventListener('mouseover',
            function () {
                this.style['color'] = 'rgb(220, 0, 0)';
            }
        );
        tempList[i].addEventListener('mouseout',
            function () {
                this.style['color'] = 'rgb(185, 0, 0)';
            }
        );
        tempList[i].addEventListener('click', async function () {
            var index = this.getAttribute('index');
            var content = `
                    <div style="background-color: #fff; padding: 20px 30px; font-size:26px; font-weight: lighter; border:none; border-radius:20px; overflow:hidden;">
                        <div style="margin: 0px 20px 40px 20px; color:rgb(0,0,0); font-weight: bold;">该交易将会被提交到公安审核</div>
                        <p style="margin: 10px 60px; font-size:22px;">ID : ${sector_check_list[index].id}</p>
                        <p style="margin: 10px 60px; font-size:22px;">交易时间 : ${sector_check_list[index].time}</p>
                        <p style="margin: 10px 60px; font-size:22px;">付款人 : ${sector_check_list[index].trader}</p>
                        <p style="margin: 10px 60px; font-size:22px;">收款人 : ${sector_check_list[index].payee}</p>
                        <p style="margin: 10px 60px; font-size:22px;">交易金额 : ${sector_check_list[index].money}</p>
                        <button class='fullScreen-button' id="confirm-button" index=${index} style="display:inline; width:90%; height:45px; margin: 30px 20px 0 20px; font-size:22px;">确认</button>
                        <button class='fullScreen-button2' style="display:inline; width:90%; height:45px; margin: 30px 20px 0 20px; font-size:22px;" onclick="hideFullScreenTip()">取消</button> 
                    </div>
                    `;
            showFullScreenTip(content);
            document.querySelector('.fullScreen-tip #confirm-button').addEventListener('click',
                async function () {
                    var index = this.getAttribute('index');
                    //更新该交易
                    const api = 'http://47.109.78.200:10010/transaction/updateTransaction';
                    data = sector_check_list[index];
                    data.status = 3;
                    // const url = getRequestUrl(data, api);
                    await fetchWithTimeout(api, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json',
                            'token': getCookieValue('token'),
                        },
                        body: JSON.stringify(data),
                    }).then(response => response.json())
                        .then(data => {
                            if (data['code'] == 100) {
                                float_text('提交审核成功');
                            } else {
                                if (data['msg'] == '未登入') {
                                    exit_login();
                                    return;
                                }
                                float_text('操作失败');
                            }
                        }).catch(error => {
                            console.log(error);
                        });
                    await update_sector_check_list_page();
                    await update_sector_check_list();
                    hideFullScreenTip();
                }
            );

        }
        );
    }
}
async function draw_sector_check() {
    document.querySelector('.sector-check-content .sector-check-first').style['display'] = 'none';
    document.querySelector('.sector-check-content .sector-check-second').style['display'] = 'none';
    switch (sector_check_state) {
        case 'list_show':
            document.querySelector('.sector-check-content .sector-check-first').style['display'] = 'block';
            break;
        case 'detail_show':
            document.querySelector('.sector-check-content .sector-check-second').style['display'] = 'block';
            break;
        default: break;
    }
}

async function sector_check_init() {
    current_page = 1;
    sector_check_list = [];
    sector_check_list_pageSize = 10;
    sector_check_list_page = 0;
    sector_check_state = 'list_show';
    update_sector_check_list_page();
    update_sector_check_list();
    draw_sector_check();
}

//添加悬浮提示
add_float_tip(document.querySelector('.sector-check-content #return-button'), '返回列表');
add_float_tip(document.querySelector('.sector-check-content #prev-page'), '上一页');
add_float_tip(document.querySelector('.sector-check-content #next-page'), '下一页');

//上一页
document.querySelector('.sector-check-first #prev-page').addEventListener('click',
    async function () {
        if (current_page > 1) {
            current_page--;
        }
        await update_sector_check_list_page();
        await update_sector_check_list();
    }
);
//下一页
document.querySelector('.sector-check-first #next-page').addEventListener('click',
    async function () {
        current_page++;
        await update_sector_check_list_page();
        await update_sector_check_list();
    }
);

//跳转页
document.querySelector('.sector-check-content .sector-check-first #jump-page input').addEventListener('keydown',
    async function (event) {
        if (event.key == 'Enter') {
            await update_sector_check_list_page();
            if (!/^\d+$/.test(this.value)) {
                float_text("你输入的页码有误");
                this.value = '';
                return;
            }
            if (this.value < 1 || this.value > sector_check_list_page) {
                float_text("你输入的页码有误");
                this.value = '';
                return;
            }
            current_page = this.value;
            await update_sector_check_list();
            this.blur();
        }
    });

//返回按钮
document.querySelector('.sector-check-content #return-button').addEventListener('click',
    async function () {
        sector_check_state = 'list_show';
        draw_sector_check();
    }
);